<template>
  <div class="record-console">
    <van-nav-bar title="我的停车记录"/>
    <van-empty
      v-if="spotRecordList.length === 0"
      description="暂无停车记录"
    />
    <van-cell
      v-for="(item, index) in spotRecordList"
      :key="index"
    >
      <template #title>
        <div class="notice-item">
          <div>序号：{{ index + 1 }}</div>
          <div>车位：{{ item.spotNumber }}</div>
          <div>开始时间：{{ item.startTime }}</div>
          <div>结束时间：{{ item.endTime }}</div>
          <div>费用：{{ item.fee || 0 }} 元</div>
        </div>
      </template>
    </van-cell>
    <van-back-top
      right="5%"
      bottom="80px"
    />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getRecordList } from '@/api/record.js'
import { useUserStore } from '@/stores/userStore'

const userStore = useUserStore()

const spotRecordList = ref([])

const loadSpotRecordList = async () => {
  const res = await getRecordList({ userId: userStore.userInfo?.id })
  if (res?.code === 0) {
    spotRecordList.value = res.data
  }
}

onMounted(() => {
  loadSpotRecordList()
})

</script>

<style scoped>
.record-console {
  /* 添加换行样式 */

  .notice-item div {
    line-height: 1.5;
    margin-bottom: 4px;
  }
}
</style>